<template>
    <div>
      <el-button type="primary" @click="openDialog">物资查询</el-button>
      <el-dialog :visible.sync="isDialogVisible" title="查询" @close="closeDialog">
        <el-form :model="form" ref="form">
          <el-form-item label="设备名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </span>
        <el-table :data="queryData" style="width: 100%">
          <el-table-column prop="name" label="设备名称" width="180"></el-table-column>
          <el-table-column prop="total" label="总数量"></el-table-column>
          <el-table-column prop="stock" label="库存数量"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isDialogVisible: false,
        form: {
          name: '',
        },
        queryData: [],
      };
    },
    methods: {
      openDialog() {
        this.isDialogVisible = true;
      },
      closeDialog() {
        this.isDialogVisible = false;
      },
      onSubmit() {
        // Simulate an API call to search for data based on form input
        this.queryData = [
          { name: '设备1', total: 100, stock: 80 },
          { name: '设备2', total: 50, stock: 30 },
          // You can add more data here to match your API response
        ];
      },
    },
  };
  </script>
  
  <style scoped>
  /* Add your customized styles here if necessary */
  </style>